<template>
  <div>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.id">
        <router-link :to="'/home/newsinfo/'+item.id">
          <img class="mui-media-object mui-pull-left" src="https://img.souche.com/20161230/png/bc836261fbb654dda6b653e428014279.png">
          <div class="mui-media-body">
            <h3>{{item.title}}</h3>
            <p class="mui-ellipsis">
                <span>发表时间: {{item.add_time}}</span>
                <span>点击:{{item.click}}次</span>
            </p>
          </div>
        </router-link>
      </li>
      
    </ul>
  </div>
</template>
<script>
import {Toast} from 'mint-ui'
export default {
    data(){
        return {
            newslist:[]  //新闻列表数据
        }
    },
    created(){
        this.getNewList()
    },
    methods:{
        getNewList(){//获取新闻列表
            this.$http.get('api/getnewslist').then(res=>{
                // console.log(res.body)
                if(res.body.status===0){//获取数据成功
                    Toast('获取数据成功')
                    this.newslist = res.body.message
                    console.log(this.newslist)
                }else {
                    Toast('获取数据失败')
                }
                
            })
        }
    }
};
</script>
<style lang="scss" scoped>
.mui-ellipsis {
    color:red;
    display:flex;
    justify-content: space-between;
}
</style>

